<template>
  <div>
    <el-card>
      <el-page-header icon="" content="个人中心" title="学生学业质量分析系统">

      </el-page-header>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-card style="text-align: center; margin-bottom: 10px;">
            <el-avatar :size="200" :src="circleUrl"></el-avatar>
            <el-divider></el-divider>
            <h3>{{ store.user.username }}</h3>
            <h4>{{ roleName }}</h4>
          </el-card>
          <el-card>
            <h3>个人简介</h3>
            <el-divider></el-divider>
            <h4>{{ store.user.introduction }}</h4>
          </el-card>
        </el-col>
        <el-col :span="16">
          <el-card>
            <el-form ref="userFormRef" :model="userForm" status-icon :rules="rules" label-width="80px" size="large"
              class="demo-ruleForm" @keyup.enter="submitForm(userFormRef)">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="userForm.username" autocomplete="on" />
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="userForm.password" type="password" />
              </el-form-item>
              <el-form-item label="性别" prop="gender">
                <el-select style="width: 100%;" placeholder="请选择你的性别" v-model="userForm.gender">
                  <el-option v-for="item in options" :key="item.label" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="个人简介" prop="introduction">
                <el-input v-model="userForm.introduction" type="textarea" />
              </el-form-item>
              <el-form-item label="上传头像" prop="avatar">
                <UploadFile :avatar="userForm.avatar" @change="handleChange"></UploadFile>
                <!-- <el-upload class="avatar-uploader" :auto-upload="false" :show-file-list="false" :on-change="handleChange">
                  <img v-if="userForm.avatar" :src="avatarComputed" class="avatar" />
                  <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                  </el-icon>
                </el-upload> -->
              </el-form-item>
              <el-form-item>
                <div class="button">
                  <el-button type="primary" @click="submitForm(userFormRef)">更新</el-button>
                  <el-button @click="resetForm(userFormRef)">取消</el-button>
                </div>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
    <!-- <button @click="hh">ss</button> -->
  </div>
</template>
<script setup>
import useUserStore from '../../store/useUserStore';
import { ref, reactive, computed, onMounted} from 'vue'
import uploadAxios from '../../utils/uploadAxios'
import UploadFile from '../../components/center/UploadFile.vue'
const store = useUserStore()
const circleUrl = computed(()=>
store.user.avatarUrl?'http://localhost:3000'+store.user.avatarUrl:"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
// userForm.avatar.includes("blob")?userForm.avatar:'http://localhost:3000'+userForm.avatar
)
const userFormRef = ref()
const { user: { role: { roleName }, username, _id, gender, introduction, avatarUrl } , changeUser} = useUserStore()
const userForm = reactive({
  username,
  password: '',
  gender,
  introduction,
  //存放头像图片路径
  avatar: avatarUrl,
  //存放文件对象
  file: null
})
const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
  gender: [
    { required: true, message: '请选择性别', trigger: 'blur' },
  ],
  introduction: [
    { required: true, message: '请输入个人简介', trigger: 'blur' },
  ],
  avatar: [
    { required: true, message: '请上传头像', trigger: 'blur' },
  ],
})
const options = [
  {
    label: '保密',
    value: 0
  },
  {
    label: '男',
    value: 1
  },
  {
    label: '女',
    value: 2
  },
]
const role = store.user.role.roleName === '管理员' ? 'users' : 'students'
//获取文件的原生对象
const handleChange = (event) => {
  console.log(event.raw);
  userForm.file = event.raw
  //让图片显示(将图片转换为二进制显示)
  userForm.avatar = URL.createObjectURL(event.raw)
}
onMounted(() => {
  console.log('mount',store.user);
})
const submitForm = () => {
  //校验表单是否成功
  userFormRef.value.validate(async (valid) => {
    if (valid) {
      const res = await uploadAxios(`/admin/${role}/${_id}/upload`,userForm)
      console.log('更新后',res.data);
      const newArr = res.data[0]?res.data[0]:res.data
      changeUser({
        ...store.user,
        username:res.data.studentname?res.data.studentname:res.data.username,
        ...newArr
      })
      console.log('pinia',store.user);
    }
  })
}
</script>
<style scoped lang='scss'>
.el-card {
  border-radius: 20px;

  .el-row {
    margin-top: 20px;
  }
}
</style>